<template>
	<!-- 收藏店铺管理 -->
	<view class="collect">
		<!-- 头部 -->
		<view class="header">
			<view class="tap" @click="goBeck">
				<image src="https://cdn3.axureshop.com/demo/1989398/images/%E6%88%91%E7%9A%84%E8%AE%A2%E5%8D%95/u591.svg"></image>
			</view>
			<view class="myc">我的收藏</view>
			<view class="manage" @click="changeRadio1(radio1)">
				<span v-if="radio1==0">完成</span>
				<span v-if="radio1==1">管理</span>
			</view>
		</view>
		
		<!-- 导航栏点击 -->
		<view class="bar">
			<view @click="changeState(1)" :class="[state==1?'active':'']">店铺</view>
			<!-- <view @click="changeState(2)" :class="[state==2?'active':'']">店铺</view>
			<view @click="changeState(3)" :class="[state==3?'active':'']">美食</view>
			<view @click="changeState(4)" :class="[state==4?'active':'']">住宿</view>
			<view @click="changeState(5)" :class="[state==5?'active':'']">本地特色</view> -->
		</view>
		
		<view class="c-box" v-for="(item,index) in checkList" :key="index">
			<view class="box-img">
				<image :src="item.storePhoto"></image>
			</view>
			<view class="box-in">
				<view class="box-in-name">{{item.storeName}}</view>
				<view><span></span></view>
				<view class="box-in-shop" @click="goStore(item.id)">去店铺</view>
			</view>
			<veiw class="close" v-if="radio1==0">
				<view @click="removeByStoreId(item.id)">
					<uni-icons type="close" size="25"></uni-icons>
				</view>
			</veiw>
		</view>
		
		<view class="foot"  v-if="radio1==0">
			<view class="foot-sc" @click="removeAll">
				<span>全部删除</span>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../util/http'
	export default {
		gid:'',//goods中的id
		name:'',
		data(){
			return{
				state:1,
				radio1: 1,
				checkbox:[],
				storeIds:[],
				checkList:[]
			}
		},
		onLoad() {
			this.getStoreByUserId();
		},

		methods:{			
		
			// 根据 userId从表store中得到部分数据
			getStoreByUserId(){
				http({
					url:'/store/getStoreByUserId',
					method:'get',
					params:{
						userId:uni.getStorageSync('uid')
					},
					success:(res)=>{
						this.checkList=res.data.data
					}
				})
			},
			//点击 × 删除该行
			removeByStoreId(id){
				http({
					url:'/userStore/removeByStoreId',
					params:{
						userId:uni.getStorageSync('uid'),
						storeId:id
					},
					success:(res)=>{
						this.getStoreByUserId()
					}
				})
			},
			// 没尝试 不知道对不对
			// 全部删除
			removeAll(){
				http({
					url:'/userStore/removeAll',
					params:{
						userId:uni.getStorageSync('uid')
					},
					success:(res)=>{
						this.getStoreByUserId()
					}
				})
			},
			// 页面跳转到相应店铺
			goStore(id){
				uni.navigateTo({
					url:"/pages/shop/store?id="+id
				})
			},
			// 返回原来的地方
			goBeck(){
				uni.navigateBack({
					
				})
			},
			changeState(state){
				this.state=state
			},
			changeRadio1(radio1){
				this.radio1=!radio1
			},
			
		}
	}
</script>

<style scoped>
	.collect{
		margin-top: 60rpx;
		background-color: #efefef; 
	}
	.header{
		display: flex;
		border-bottom: 1px solid gainsboro;
	}
	.tap{
		margin-left: 40rpx;
		height: 60rpx;
		display: flex;
	}
	.tap image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.myc{
		position: relative;
		left: 40px;
	}
	.manage{
		position: relative;
		left: 60px;
	}
	.bar{
		margin: 10x auto;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
	}
	.bar view{
		font-size: 14px;
		margin-top: 20rpx;
		height: 60rpx;
	}
	.active{
		color: #3399CC;
		border-bottom: 1px solid #3399CC;
	}
	.c-box{
		height: 130px;
		background-color: #ffffff;
		display: flex;
		margin-top: 5px;
		border-radius: 15px;
		border-bottom: 1px solid #d5d5d5;
	}
	.box-img{
		width: 40%;
	}
	.box-img > image{
		width: 100%;
		height: 100%;
		border-radius: 15px;
	}
	.box-in{
		margin: 10px;
		max-width: 55%;
		min-width: 20%;
	}
	.box-in-name{
		margin-left: 5px;
		width: 200px;
		height: 60px;
	}
	.box-in-shop{
		height: 20px;
		position: relative;
		left: 120px;
		top: 28px;
		font-size: 12px;
		color: #ff0000;
	}
	.close{
		position: relative;
		right: 20px;
		margin-top: 5px;
	}
	.foot{
		position: fixed;
		bottom: 0;
		background-color: #e2e2e2;
		width: 100%;
		height: 50px;
		display: flex;
	}
	.foot-sc{
		width: 100px;
		height: 30px;
		position: relative;
		top: 10px;
		left: 60%;
		color: #ffffff;
		background-color: #55aaff;
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.foot-sc span{
		
	}
</style>